<template>
  <div class="box">
    <h2>子组件 sub</h2>
    从父组件中获取的值:<label for="">{{$store.state.num}}</label>
    <br>
    <button @click="sub">值-1</button>
    <button @click="test">测试使用mutation</button>
  </div>
</template>
<style lang="css">
  .box{
    border:1px solid #ccc;
    width:200px;
    padding:5px;
    margin: 20px;
  }
</style>
<script>
// 在组件中通过映射的方式来使用vuex中的mutations
// 1. 引入工具函数
import { mapMutations } from 'vuex'
// mapMutations 是一个函数，在vue中定义的。
// mapMutations(['mAdd1', 'mAddN'])的返回值是一个对象
//       这个对象类似于{mAdd1:function(){}, mAddN:function(){}}
// 2. 在methods中 插入 映射函数的结果

export default {
  name: 'SubItem',
  // 下面的代码中，相当于methods中定义了 4个方法 
  // sub,mAdd1,newFuncName, test
  methods: {
    sub () {
      // 直接去修改state，不要用！！！
      this.$store.state.num--
    },
    ...mapMutations(['mAdd1']),
    // 在映射到methods中时，改下名字。原来在mutations中叫mAddN,到了组件的methods叫newFuncName
    ...mapMutations({newFuncName:'mAddN'}),
    test () {
      // 由于上面的mAdd1并映射成方法，所以这里可以直接加this.来访问。
      // this.mAdd1()
      // this.mAddN({a:100,b:200})
      this.newFuncName({a:100,b:200})
    }
  }
}
</script>